<template>
  <div id="Member">
    <!-- <h1>我是会员组件</h1> -->
    <el-row class="buttonrow">
      <el-button type="primary" class="button">下载</el-button>
      <el-button type="warning" class="button">批量删除</el-button>
      <el-button type="success" @click="addMem" icon="el-icon-plus"
        >新增会员</el-button
      >
      <el-input placeholder="请输入内容" v-model="input2" class="search">
        <i
          slot="prefix"
          class="el-input__icon el-icon-close"
          @click="chongzhi"
        ></i>
        <template slot="append">
          <el-button type="primary" @click="search" class="button"
            >搜索</el-button
          >
        </template>
      </el-input>
    </el-row>
    <!-- 表格 -->
    <el-table
      ref="multipleTable"
      :data="elMemData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column align="center" label="会员号" width="120" prop="id">
      </el-table-column>
      <el-table-column align="center" prop="vip_name" label="姓名" width="120">
      </el-table-column>
      <el-table-column
        align="center"
        prop="vip_discount"
        label="折扣系数"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="vip_total_consume"
        label="总消费金额"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="vip_phone"
        label="会员电话"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop=""
        label="操作"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <!-- 修改按钮 -->
          <i class="el-icon-edit editBut" @click="edit(scope.row)">修改</i>
          <!-- 删除按钮 -->
          <i class="el-icon-delete delBut" @click="del(scope.row.id)">删除</i>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->

    <el-pagination
      background
      layout="prev, pager, next"
      :total="MemtableData.length"
      :page-size="10"
      :current-page="nowPage"
      @current-change="elChangePage"
    >
    </el-pagination>

    <!-- 新增弹框 -->
    <AddMem
      title="新增会员信息"
      @add="quxiao"
      :state="dialogFormVisible"
      :form="myform"
      @shuanxin="selectMemData"
    ></AddMem>
    <!-- 修改 -->
    <UpdateMem
      title="修改会员信息"
      @editData="quxiaoEdit"
      :state="editData"
      :form1="editform"
      @shuanxin="selectMemData"
    ></UpdateMem>
  </div>
</template>

<script>
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import * as api from "../utils/api";
import AddMem from '../components/AddMem'
import UpdateMem from '../components/UpdateMem'

export default {
  name: 'Member',
  components: {
    AddMem,
    UpdateMem
  },
  data() {
    return {
      input2: '',
      MemtableData: [],//会员信息
      nowPage: 1,//当前页
      dialogFormVisible: false,
      editData: false,
      myform: {//新增会员数据
        vip_name: '',
        vip_discount: '',
        vip_total_consume: '',
        vip_phone: ''
      },
      editform: {//修改
        id: '',
        vip_name: '',
        vip_discount: '',
        vip_total_consume: '',
        vip_phone: ''
      },

    }
  },
  /* 方法 */
  methods: {
    /* 查询所有会员信息 */
    selectMemData() {
      this.axios({
        method: 'get',
        url: api.SELECT_MEMBER,
        params: {}
      }).then(data => {
        console.log(data)
        this.MemtableData = data.data.data
      })
    },
    /*  分页改变当前页*/
    elChangePage(val) {
      console.log(val)
      this.nowPage = val
    },
    /* 重置 */
    chongzhi() {
      this.input2 = ''
      this.selectMemData()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    /* 新增会员 */
    addMem() {
      this.dialogFormVisible = true
    },
    /* 修改 */
    edit(row) {

      this.editData = true;
      this.editform.id = row.id
      this.editform.vip_name = row.vip_name
      this.editform.vip_discount = row.vip_discount
      this.editform.vip_total_consume = row.vip_total_consume
      this.editform.vip_phone = row.vip_phone
    },
    /* 删除 */
    del(id) {

      this.$confirm('您正在删除一条数据，是否继续？', '确认删除', {
        distinguishCancelAndClose: true,
        confirmButtonText: '确认删除',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.axios({
            method: 'post',
            url: api.DEL_MEM,
            data: { id },
          }).then(data => {
            if (data.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              });
              this.selectMemData();
            } else {
              this.$message({
                type: 'info',
                message: '删除失败'
              });
            }
          })
        })
        .catch(action => {
          this.$message({
            type: 'info',
            message: action === 'cancel'
              ? '取消删除'
              : ''
          })
        });

    },
    /* 查询 */
    search() {
      // console.log()
      let phone = this.input2
      this.axios({
        method: 'get',
        url: api.SEARCH_MEM,
        params: { phone }
      }).then(data => {
        console.log(data)
        if (data.data.code == 200) {
          this.MemtableData = data.data.data
        }
      })
    },
    /* 取消 */
    quxiao() {
      this.dialogFormVisible = false
    },
    quxiaoEdit() {
      this.editData = false
    }
  },
  /* 生命周期 */
  created() {
    this.selectMemData()
  },

  /* 计算属性 */
  computed: {
    elMemData() {
      let start = (this.nowPage - 1) * 10;
      let end = start + 10;
      return this.MemtableData.slice(start, end);
    }

  },
}
</script>

<style scoped>
#Member {
  margin-top: 10px;
}
/* 下载按钮 批量删除*/
.buttonrow {
  text-align: justify !important;
}
/* 搜索 */
.search {
  width: 400px;
  float: right;
}
/* 表格 */
.el-table {
  margin-top: 10px;
}
/* 表格修改 删除 按钮 */
.editBut {
  color: #409eff;
  margin-right: 10px;
  cursor: pointer;
}
.delBut {
  color: #f25e43;
  cursor: pointer;
}
</style>